<style lang='less' >
    #couponListDetail{
        margin:30px 0;
        .detailBox{
            position:relative;
            width:100%;
            .detailTitle{
                margin-top:10px;
                padding: 5px 0;
                color: #f7931e;
                font-size: 16px;
                border-bottom: 2px solid #e8e8e8;
                line-height: 30px;

            }
            .el-form--inline .el-form-item{
                margin:10px;
                .el-input.is-disabled .el-input__inner{
                    color:rgb(72, 98, 106);
                }
            }

        }
         .cardIdListBox{
            position: relative;
            width: 100%;
            text-align: center;
            font-size: 14px;
            color: rgb(31, 55, 61);
            line-height: 40px;
            top:20px;
            height: 100%;
            border: 1px solid rgb(223, 234, 236);
            .cardBox{
            position: relative;
            width: 100%;
            overflow:hidden;
            span{
                width: 25%;
                border: 1px solid rgb(223, 234, 236);
                border-top: none;
                border-left: none;
                float: left;
                box-sizing: border-box;
                text-align: left;
                padding: 0 10px;
            }
            }
            .cardHeadBox{
            border-bottom: 1px solid rgb(223, 234, 236);
            background-color: #edfcfc;
            color: rgb(31, 55, 61);
            font-weight: bold;
            }
        }
    }

 
</style>

<template>
    <div id='couponListDetail'>
        <el-button type="warning" class="btn" @click='goPage("couponList")'>返回卡券列表</el-button>
        <div class='detailBox'>
            <div class="detailTitle">卡券详情</div>
            <div class="detailShowBox">
                <el-form :inline="true" :model="couponDetail" class="demo-form-inline">
                    <el-form-item label="名称" label-width='100px'>
                        <el-input
                            v-model="couponDetail.name"
                            :disabled="true">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="面值" label-width='100px'>
                        <el-input
                            v-model="couponDetail.faceValue"
                            :disabled="true">
                        </el-input>
                    </el-form-item>
                     <el-form-item label="状态" label-width='100px'>
                        <el-input
                            v-model="statusOptionObj[couponDetail.status]"
                            :disabled="true">
                        </el-input>
                    </el-form-item>

                     <el-form-item label="类型" label-width='100px'>
                        <el-input
                            v-model="typeOptionObj[couponDetail.type]"
                            :disabled="true">
                        </el-input>
                    </el-form-item>

                     <el-form-item label="卡券ID" label-width='100px'>
                        <el-input
                            v-model="couponDetail.cardIdText"
                            :disabled="true">
                        </el-input>
                    </el-form-item>

                     <el-form-item label="加息天数" label-width='100px' v-if='couponDetail.type == "RAISE_RATES"'>
                        <el-input
                            v-model="couponDetail.cardDays"
                            :disabled="true">
                        </el-input>
                    </el-form-item>

                     <el-form-item label="最低可用金额" label-width='100px' v-if='couponDetail.type == "VOUCHER_COUPON"'>
                        <el-input
                            v-model="couponDetail.conditionNum"
                            :disabled="true">
                        </el-input>
                    </el-form-item>

                    <br/>

                     <el-form-item label="发放数量" label-width='100px'>
                        <el-input
                            v-model="couponDetail.issueCount"
                            :disabled="true">
                        </el-input>
                    </el-form-item>

                     <el-form-item label="已领取数量" label-width='100px'>
                        <el-input
                            v-model="couponDetail.takeCount"
                            :disabled="true">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="已使用数量" label-width='100px'>
                        <el-input
                            v-model="couponDetail.useCount"
                            :disabled="true">
                        </el-input>
                    </el-form-item>

                    <br/>

                    <el-form-item label="领取限制方式" label-width='100px'>
                        <el-input
                            v-model="limitTypeObj[couponDetail.limitType]"
                            :disabled="true">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="领取限制数量" label-width='100px'>
                        <el-input
                            v-model="couponDetail.limitNum"
                            :disabled="true">
                        </el-input>
                    </el-form-item>
                    
                    <br/>

                    <el-form-item label="领取开始时间" label-width='100px'>
                        <el-input
                            v-model="couponDetail.takeDateStartedStr"
                            :disabled="true">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="领取结束时间" label-width='100px'>
                        <el-input
                            v-model="couponDetail.takeDateEndStr"
                            :disabled="true">
                        </el-input>
                    </el-form-item>

                    <br/>


                    <el-form-item label="过期类型" label-width='100px'>
                        <el-input
                            v-model="expireTypeObj[couponDetail.expireType]"
                            :disabled="true">
                        </el-input>
                    </el-form-item>


                    <el-form-item :label=" couponDetail.expireType =='ACTIVE_DAYS' ? '指定过期天数' : '固定过期日期'" label-width='100px' >
                        <el-input
                            v-model="couponDetail.expireType =='ACTIVE_DAYS' ? couponDetail.expireDays +'天' : couponDetail.expireDate"
                            :disabled="true">
                        </el-input>
                    </el-form-item>

                    <br/>

                    <el-form-item label="描述" label-width='100px'>   
                        <el-input
                            v-model="couponDetail.remark"
                            :disabled="true">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="扩展描述" label-width='100px'>
                        <el-input
                            v-model="couponDetail.subRemark"
                            :disabled="true">
                        </el-input>
                    </el-form-item>
                   
                </el-form>
            
            </div>
        </div>

        <div class='detailBox'  v-if='couponDetail && couponDetail.type =="EXCHANGE_COUPON" && showCardIdList.length > 0'>
            <div class="detailTitle">兑换卡号</div>
            <div class=" cardIdListBox" >
                <div class="cardBox cardHeadBox">序号</div>
                <div class="cardBox">
                    <span :key='item' v-for='item in showCardIdList' >{{item}}</span>
                </div>
                <div> {{showCardIdListErr}}</div>
            </div>
        </div>
    </div>
  
</template>

<script>
    import {getCouponDetail, getCouponExchangeCode} from 'api/coupon/index.js'
    import { typeOptionObj, statusOptionObj, expireTypeObj, limitTypeObj} from '../config.js'


    export default {
        props:[''],
        components:{

        },
        data(){
            return{
                uuid:this.$route.query.uuid,
                couponDetail:{
                    name:'',
                    faceValue:'',
                    status:'',
                    type:'',
                    cardIdText:'',
                    cardDays:'',
                    remark:'',
                    subRemark:'',
                    expireType:'',
                    expireDate:'',
                    takeDateStarted:'',
                    takeDateEnd:'',
                    limitType:'',
                    limitNum:'',
                    issueCount:'',//发放数量
                    takeCount:'',
                    useCount:'',
                },
                showCardIdList:[],//卡券id
                showCardIdListErr:'',
                typeOptionObj:typeOptionObj,
                statusOptionObj:statusOptionObj,
                expireTypeObj:expireTypeObj,
                limitTypeObj:limitTypeObj,
            }
        },
        methods:{
            async getCouponDetail(id){
                try{
                    let back = await getCouponDetail(id)
                    back = back.data
                    console.log(back)
                    if(back && back.resultCode == '200'){
                        this.couponDetail = back.result;
                        if(back.result && back.result.type && back.result.type == 'EXCHANGE_COUPON'){ //兑换卡才有
                            this.getCouponExchangeCode(back.result.cardIdText)
                        }
                    }else{
                        this.$alert(back.msg)
                    }
                }catch(err){
                    console.error(err)
                }
            },
            async getCouponExchangeCode(id){
                try{
                    let back = await getCouponExchangeCode(id)
                    back = back.data
                    console.log('getCouponExchangeCode', back)
                    if(back.resultCode == '200'){
                        this.showCardIdList = back.result
                    }else{
                        this.showCardIdListErr = back.result
                    }
                }catch(err){
                    this.showCardIdListErr = '查询错误！'
                    console.log(err)
                }
            },
            goPage(name){
                this.$router.push({
                    name:name,
                })
            }
        },
        created(){
            this.$emit('setTitleMsg',['卡券管理', '卡券列表', '卡券详情'])
            console.log(this.$route.query.uuid)
            this.getCouponDetail(this.uuid)

        },
        destroyed(){
            this.$emit('setTitleMsg', ['卡券管理', '卡券列表'])

        },
    }
</script>